<template>
    <!--电销管理 已处理-->
    <div class="content_panel project_modules">
        <div class="content_panel project_modules">
            <div class="content_panel_top">
                <h3 class="panel_title">
                    <span>{{ $t('salesManage.robotOrder') }}</span>
                </h3>
                <el-form ref="form" :model="form"  :inline="false" class="module_form">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <!-- 批次号 -->
                            <el-form-item prop="batchCode">
                                <el-input v-model="form.batchCode" :placeholder="$t('salesManage.batchNumber')" clearable></el-input>
                            </el-form-item>
                            </el-col>
                        <el-col :span="8">
                        <el-form-item prop="importDate" label=""><!--导入时间-->
                            <el-date-picker
                                    v-model="form.importDate"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :start-placeholder="$t('salesManage.timeStartImport')"
                                    :end-placeholder="$t('salesManage.timeEndImport')"
                                    :default-time="['00:00:00', '23:59:59']"
                                    class="el-select"
                                    style="width:100%;"
                                    clearable>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                        <!--营销类型-->
                        <el-col :span="4">
                            <el-form-item prop="marketingType">
                                <el-select v-model="form.marketingType"  clearable :placeholder="$t('salesManage.marketingType')"
                                           style="width: 100%"><!--营销类型-->
                                    <el-option v-for="item in keyMap.marketingType()" :key="item.value"
                                               :value="item.value" :label="item.label"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :row-class-name='tableRowClassName' :max-height="tableMaxHeight" style="width: 100%;">
                        <!-- 批次号 -->
                        <el-table-column prop="batchCode" :label="$t('salesManage.batchNumber')"
                                         min-width="180"></el-table-column>
                                          <!-- 机器人话术模板 -->
                        <el-table-column prop="templateName" :label="$t('salesManage.robotTemplate')"
                                         min-width="250"></el-table-column>
                        <!--营销类型-->
                        <el-table-column prop="marketingType" :label="$t('salesManage.marketingType')" min-width="120">
                            <template slot-scope="{ row }">{{ keyMap.marketingType(row.marketingType) }}</template>
                        </el-table-column><!--营销类型-->
                       <!--所属APP-->
                       <el-table-column prop="appName" :label="$t('common.ownedApp')" min-width="120">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--所属APP-->
                        <!-- 用户数 -->
                        <el-table-column prop="userNum" :label="$t('salesManage.numberUser')" min-width="80"></el-table-column>
                        <!-- 待分配数 -->
                        <el-table-column prop="waitNum" :label="$t('common.numberToPersonal')" min-width="120"></el-table-column>
                        <!-- 导入时间 -->
                        <el-table-column prop="createTime" :label="$t('salesManage.timeImport')" min-width="180">
                            <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" min-width="120">
                            <template slot-scope="{ row }">
                                <el-button :disabled="row.recyclingStatus==1" type="text" @click="editHandler(row, 'channel')">{{ $t('common.recovery') }}</el-button>
                            </template>
                        </el-table-column>                        
                    </el-table>
                    <!-- 分页组件 -->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>
        <recoveryDialog ref="recoveryDialog" @recoverySuc="getTableData"/>
    </div>
</template>

<script>
import Pagination from '@/components/pagination';
import mixin from '@/service/mixin';
import mixinTM from './mixin/mixin-tel-manage';
import keyMap from '@/config/key-map';
import SelectAppList from '@/components/select-app-list';
import recoveryDialog from './components/recoveryDialog'
export default {
    name: 'telemarketing-telManage-processed',
    components: {
        Pagination,
        SelectAppList,
        recoveryDialog
    },
    mixins: [mixin],
    data() {
        return {
            keyMap,
            form: {

                batchCode: '',
                importDate:[],
                marketingType: '',
                isRobot:true,
            },
            batchCodeList: [], // 批次号列表
        };
    },
    methods: {
        editHandler(row){
            this.$refs.recoveryDialog.showDialog(row);
        },
        search() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.getTableData({ currentPage: 1 }, this.form);
                } else {
                    this.$message.error(this.$t("verify.plsCheckFilters"));
                }
            });
        },
        tableRowClassName({row}){
            if(row.register){
                return 'warning-row'
            }
        },
        handleParams(page = this.page, opts = this.form) {
            const params = {
                batchCode: '',
                importDateStart: '',
                importDateEnd: '',
                marketingType: '',
                page: {
                    pageNo: page.currentPage,
                    pageSize: this.page.pageSize
                },
                isRobot:true,
            };

            if (opts) {
                Object.keys(params).forEach((key) => {
                    if (typeof opts[key] !== 'undefined') {
                        params[key] = opts[key];
                    }
                });
            }
            if (this.form.importDate && this.form.importDate.length) {
                params.importDateStart = this.form.importDate[0];
                params.importDateEnd = this.form.importDate[1];
            }
            return params;
        },
        getTableData(page = this.page, opts = this.form) {
            console.warn(opts)
            const params = this.handleParams(page, opts);
            this.$api.telSales.getTmUserBatchList(params).then((res) => {
                const { status, data, error } = res;
                if (status === '1' && error === '00000000') {
                    this.tableData = data.resultData || [];
                    this.setPage(data.page, this.page);
                }
            });
        },
    },
    created() {
        this.getTableData()
    }
}
</script>
<style lang="scss">
[data-page=telemarketing-telManage-processed] {
    .el-table .cell, .el-table th > .cell {
        word-break: keep-all;
        word-wrap: break-word;
    }

    .el-button {
        margin-bottom: 18px
    }
    .warning-row{
        color: #a30014 !important;
        a{
          color: #a30014 !important;
        }
    }
    .el-table__row {
        .el-button {
            margin-bottom: 0px
        }
    }
}
</style>

